<template>
  <el-col :span="10">
    <el-row class="head mt10 pt10">
      <el-form v-if="showCenterTFF" ref="transformForm" :model="transformForm" label-width="40px">
        <el-col :span="9" :offset="8">
          <el-form-item label="时间">
            <div class="block time-filter">
              <el-date-picker
                v-model="transformForm.time"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                value-format="yyyy-MM-dd"
                size="mini"
                @change="handleTransform"
              ></el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
      <div class="filter-btn pointer" @click="handleSwitchCenterTFF">
        <i class="fa fa-filter fa-2x filter" aria-hidden="true" style="color: #409EFF;"></i>
        <span style="color: #409EFF;" class="fs16">过滤</span>
      </div>
    </el-row>
    <div class="grid-content-center bg-purple pt20 pl15" id="pro-transform"></div>
    <el-row class="footer mt10 pt10">
      <el-form v-if="showCenterTFF" ref="transformForm" :model="transformForm" label-width="40px">
        <el-row>
          <el-col :span="7" v-if="promotionList">
            <el-form-item label="渠道">
              <el-select
                v-model="transformForm.promotions"
                multiple
                collapse-tags
                placeholder="筛选渠道"
                @change="handleTransform"
              >
                <el-option v-for="item in promotionList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="trialList">
            <el-form-item label="渠道">
              <el-select
                v-model="transformForm.trial"
                placeholder="筛选金融渠道"
                @change="handleTransform"
              >
                <el-option v-for="item in trialList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="warrantManList">
            <el-form-item label="权证专员" label-width="85px">
              <el-select
                v-model="transformForm.warrantMan"
                placeholder="筛选权证专员"
                @change="handleTransform"
              >
                <el-option v-for="item in warrantManList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="centerList">
            <el-form-item label="中心">
              <el-select v-model="transformForm.center" placeholder="筛选中心" @change="getDeptList">
                <el-option v-for="item in centerList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" v-if="centerList">
            <el-form-item label="部门">
              <el-select v-model="transformForm.dept" placeholder="筛选部门" @change="handleTransform">
                <el-option v-for="item in deptList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
  </el-col>
</template>

<script>
import { option6, pickerOptions2 } from "@/../config/Stats_options";
import { getMonthStartDate, getMonthEndDate } from "@/utils/getCurrMonth";

export default {
  name: "funnel",
  data() {
    return {
      transformForm: {
        time: [getMonthStartDate(), getMonthEndDate()],
        promotions: [],
        center: "",
        dept: "",
        trial: "",
        warrantMan: ""
      },
      deptList: [],
      showCenterTFF: false,
      centerDeptFilter: false,
      pickerOptions2
    };
  },
  mounted() {
    this.handleTransform();
  },
  watch: {
    promotionList() {
      this.transformForm.promotions = this.promotionList;
    }
  },
  props: [
    "promotionList",
    "centerList",
    "funnelTitle",
    "funnelItem",
    "trialList",
    "warrantManList"
  ],
  methods: {
    handleSwitchCenterTFF() {
      this.showCenterTFF = !this.showCenterTFF;
    },
    handleTransform() {
      if (this.centerList) {
        this.handleProTransform();
      } else {
        this.handleWarrTransform();
      }
    },
    handleProTransform() {
      option6.series[0].data = this.funnelItem;
      option6.series[0].data.forEach(item => {
        item.value = 0;
      });
      this.$axios
        .post("/api/statistics/Stats_ProTransform", {
          from: this.transformForm.time[0],
          to: this.transformForm.time[1],
          promotions: this.transformForm.promotions,
          center: this.transformForm.center,
          dept: this.transformForm.dept
        })
        .then(data => {
          if (this.promotionList) {
            option6.series[0].data[this.funnelItem.length - 5].value =
              data.packageSum;
          }
          option6.series[0].data[this.funnelItem.length - 4].value =
            data.visitSum;
          option6.series[0].data[this.funnelItem.length - 3].value =
            data.signSum;
          option6.series[0].data[this.funnelItem.length - 2].value =
            data.enterSum;
          option6.series[0].data[this.funnelItem.length - 1].value =
            data.pickCarSum;
        })
        .then(() => {
          this.updateTransform();
        });
    },
    handleWarrTransform() {
      option6.series[0].data = this.funnelItem;
      option6.series[0].data.forEach(item => (item.value = 0));
      this.$axios
        .post("/api/statistics/Stats_WarrTransform", {
          from: this.transformForm.time[0],
          to: this.transformForm.time[1],
          trial: this.transformForm.trial,
          warrantMan: this.transformForm.warrantMan
        })
        .then(data => {
          option6.series[0].data[this.funnelItem.length - 4].value =
            data.ordertakingSum;
          option6.series[0].data[this.funnelItem.length - 3].value =
            data.passSum;
          option6.series[0].data[this.funnelItem.length - 2].value =
            data.loanAmountSum;
          option6.series[0].data[this.funnelItem.length - 1].value =
            data.pickCarSum;
        })
        .then(() => {
          this.updateTransform();
        });
    },
    updateTransform() {
      option6.title.text = this.funnelTitle;
      let proTransform = this.$echarts.init(
        document.getElementById("pro-transform")
      );
      proTransform.setOption(option6, true);
    },
    getDeptList() {
      this.transformForm.dept = "";
      this.$axios
        .post("/api/system/departmentList", this.transformForm)
        .then(data => {
          this.deptList = data.map(item => {
            return item.name;
          });
        })
        .then(() => {
          this.handleProTransform();
        });
    }
  }
};
</script>
<style>
</style>